<template>
    <table cellspacing="0" rowspacing="0">
        <!-- 基础字段 -->
        <tr v-for="field in baseFields">
            <th>{{ field.label }}</th>
            <td>
                <ConfigField :field="field" v-model="model" @change="fieldChanged" />
            </td>
        </tr>

        <!-- 组件个性化配置字段 -->
        <tr v-for="field in cmpFields[model.code]">
            <th>{{ field.label }}</th>
            <td>
                <ConfigField :field="field" v-model="model" @change="fieldChanged" />
            </td>
        </tr>

        <!-- 其它字段 -->
        <tr v-for="field in moreFields">
            <th>{{ field.label }}</th>
            <td>
                <ConfigField :field="field" v-model="model" @change="fieldChanged" />
            </td>
        </tr>
    </table>
</template>
<script setup>
import ConfigField from "./config-field.vue";
import { examples } from "../example/chart";

const emits = defineEmits(["change"]);
const baseFields = [
    // { label: "组件id", prop: "id", type: "text" },
    { label: "组件类型", prop: "name", type: "text" },
    { label: "宽度", prop: "style.width", type: "number", min: 1, max: 100, unit: "%", step: 2 },
    { label: "高度", prop: "style.height", placeholder: "请输入高度，单位%或px" },
    { label: "背景", prop: "style.background", type: "colorPicker" },
    {
        label: "背景图",
        prop: "style.backgroundImage",
        type: "imageUploader",
        getter: (val) => {
            // 从背景图中解析图片
            if (!val) {
                return;
            }
            let arr = val.match(/url\((.*)\)/);
            if (arr.length > 1) {
                val = arr[1].replaceAll('"', "").replaceAll("'", "");
            }

            return val;
        },
        setter: (val) => {
            if (!val) {
                return;
            }
            return `url('${val}')`;
        },
    },
    { label: "圆角", prop: "style.borderRadius", type: "number", min: 0, unit: "px" },
    { label: "边框颜色", prop: "style.borderColor", type: "colorPicker" },
    { label: "边框厚度", prop: "style.borderWidth", type: "number", unit: "px" },
];

const cmpFields = {
    render: [{ label: "模板", prop: "config.template", type: "script" }],
    chart: [{ label: "图表选项", prop: "config.options", type: "script", examples }],
    "title-bar": [{ label: "标题", prop: "config.title" }],
    text: [
        { label: "文本", prop: "config.text" },
        { label: "字体大小", prop: "style.fontSize", type: "number", unit: "px" },
        { label: "颜色", prop: "style.color", type: "colorPicker" },
        {
            label: "字体粗细",
            prop: "style.fontWeight",
            type: "radioGroup",
            options: [
                { label: "常规", value: "normal" },
                { label: "加粗", value: "bold" },
            ],
        },
        {
            label: "水平排列",
            prop: "style.justifyContent",
            type: "radioGroup",
            options: [
                { label: "左", value: "flex-start" },
                { label: "中", value: "center" },
                { label: "右", value: "flex-end" },
            ],
        },
        {
            label: "垂直排列",
            prop: "style.alignItems",
            type: "radioGroup",
            options: [
                { label: "上", value: "flex-start" },
                { label: "中", value: "center" },
                { label: "下", value: "flex-end" },
            ],
        },
    ],
    html: [{ label: "网页内容", prop: "config.html", type: "script", lang: "html" }],
    image: [{ label: "图片", prop: "config.image", type: "imageUploader" }],
    carousel: [{ label: "图片", prop: "config.images", type: "imageUploader", multiple: true, limit: 5 }],
    frame: [{ label: "地址", prop: "config.src" }],
    "color-cards": [{ label: "数据列表", prop: "config.items", type: "script" }],
};

const moreFields = [{ label: "更多样式", prop: "style", type: "script", lang: "json" }];

const model = defineModel();

function fieldChanged() {
    emits("change");
}
</script>

<style lang="scss" scoped>
table {
    --border-color: var(--sub_border_color);
    border-top: 1px solid var(--border-color);
    border-left: 1px solid var(--border-color);

    th,
    td {
        border-bottom: 1px solid var(--border-color);
        border-right: 1px solid var(--border-color);
        padding: 4px 8px;
    }

    th {
        width: 70px;
        text-align: right;
        font-weight: normal;
        background: var(--sub_bg_color);
        color: var(--sub_font_color);
    }
}
</style>
